<template>
  <div class="home">
    <van-swipe class="my-swipe" indicator-color="white">
      <van-swipe-item>
        <video
          id="play_btn"
          class="videobox"
          :src="dataSource.vedioList"
          webkit-playsinline
          playsinline
        ></video>
        <div @click.stop="play">
          <img
            class="play_btn"
            v-show="playFlag"
            src="@/assets/images/play.png"
          />
          <img
            class="video_img"
            v-show="playFlag"
            :src="dataSource.imageList"
          />
        </div>
      </van-swipe-item>
      <van-swipe-item
        v-for="(item, index) in dataSource.imageList"
        :key="index"
      >
        <img class="banner_img" :src="item" />
      </van-swipe-item>
    </van-swipe>

    <div class="detailbox">
      <div class="detail_con">
        <div class="detail_price">¥{{ dataSource.price }}</div>
        <div class="detail_num">
          销量<span class="txt">{{ dataSource.saleNum }}</span>
        </div>
      </div>
      <div class="detail_ttbox">
        <div class="detail_tt">{{ dataSource.name }}</div>
        <!-- <div class="share" @click="wxShare">分享</div> -->
      </div>
    </div>
    <div class="detail_goods">
      <div class="goods_tt">商品详情</div>
      <img class="goods_img" :src="dataSource.imageList" />
    </div>
    <div class="detail_goods">
      <div class="goods_tt">红包兑换流程</div>

      <div class="goods_tips">
        下单后，赠品封面在“订单详情”中点击“兑换红包封面”领取。
      </div>
    </div>

    <div class="footer">
      <div class="footerbox">
        <div
          class="menu_item"
          :class="menuIndex == index ? 'active' : ''"
          v-for="(item, index) in menuList"
          :key="index"
          @click="goRouter(item, index)"
        >
          <img
            class="menu_icon"
            :src="menuIndex == index ? item.img2 : item.img"
          />
          <div class="menu_name">{{ item.name }}</div>
        </div>
        <div class="buy_btn" @click="handleBuy">立即购买</div>
      </div>
    </div>
  </div>
</template>

<script>
import commonApi from "@/api/commonApi";
import { getCookies, getQueryString } from "@/utils/util.js";

import nav1 from "@/assets/images/nav1.png";
import nav1_check from "@/assets/images/nav1_check.png";
import nav2 from "@/assets/images/nav2.png";
import nav2_check from "@/assets/images/nav2_check.png";
export default {
  data() {
    return {
      bannerList: [],

      userId: getCookies("userId"),
      menuList: [
        { img: nav1, img2: nav1_check, name: "商城", url: "/home" },
        { img: nav2, img2: nav2_check, name: "订单", url: "/order" },
      ],
      menuIndex: 0,
      bagId: "",
      dataSource: {},
      playFlag: true,
    };
  },

  mounted() {
    if (getQueryString("uta")) {
      localStorage.setItem("uta", getQueryString("uta"));
    }

    // if (getCookies('bagId')) {
    //   this.bagId = getCookies('bagId')
    //   this.getDetail(this.bagId)
    // }
    if (this.$route.query && this.$route.query.bagId) {
      this.bagId = this.$route.query.bagId;
      this.getDetail(this.bagId);
    }
  },

  methods: {
    getDetail(bagId) {
      commonApi.getRedDetail({ bagId }).then((res) => {
        console.log(res);
        if (res) {
          if (res.imageList) {
            res.imageList = res.imageList.split(",");
          }
          this.dataSource = res;
        }
      });
    },

    handleBuy() {
      let vm = this;

      if (getCookies("userId")) {
        commonApi
          .orderApply({
            bagId: this.bagId,
            uta: getCookies("uta") || "",
            openid: getCookies("openid") || "",
            userId: getCookies("userId") || "",
          })
          .then((res) => {
            if (res.code != 500) {
              commonApi
                .getPayInfo({
                  openid: getCookies("openid") || "",
                  userId: getCookies("userId") || "",
                  orderId: res.orderId,
                })
                .then((el) => {
                  if (el.payInfo) {
                    let payInfo = JSON.parse(el.payInfo);
                    let data = payInfo.wechatData;

                    wx.config({
                      debug: false, // 这里一般在测试阶段先用ture，等打包给后台的时候就改回false,
                      appId: data.appId, // 必填，公众号的唯一标识
                      timestamp: data.timeStamp, // 必填，生成签名的时间戳
                      nonceStr: data.nonceStr, // 必填，生成签名的随机串
                      signature: data.sign, // 必填，签名
                      jsApiList: ["chooseWXPay", "checkJsApi"], // 必填，需要使用的JS接口列表
                    });

                    wx.ready(() => {
                      wx.chooseWXPay({
                        timestamp: data.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
                        nonceStr: data.nonceStr, // 支付签名随机串，不长于 32 位
                        package: data.packages, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
                        signType: data.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
                        paySign: data.sign, // 支付签名
                        success: function (payRes) {
                          // 支付成功后的回调函数
                          Toast("支付成功");
                          vm.$router.push({
                            path: "/orderDetail",
                            query: { orderId: res.orderId },
                          });
                        },
                        cancel: function (payRes) {
                          // that.$message.error('取消支付')
                        },
                        fail: function (payRes) {
                          // that.$message.error('支付失败')
                        },
                      });
                    });
                  }
                });
            }
          });
      }
    },

    // wxShare() {
    //   if (getCookies("userId")) {
    //     commonApi
    //       .orderApply({
    //         bagId: this.bagId,
    //         uta: getCookies("uta") || "",
    //         openid: getCookies("openid") || "",
    //         userId: getCookies("userId") || "",
    //       })
    //       .then((res) => {
    //         if (res.code != 500) {
    //           commonApi
    //             .getPayInfo({
    //               openid: getCookies("openid") || "",
    //               userId: getCookies("userId") || "",
    //               orderId: res.orderId,
    //             })
    //             .then((el) => {
    //               if (el.payInfo) {
    //                 let payInfo = JSON.parse(el.payInfo);
    //                 let data = payInfo.wechatData;

    //                 wx.config({
    //                   debug: false, // 这里一般在测试阶段先用ture，等打包给后台的时候就改回false,
    //                   appId: data.appId, // 必填，公众号的唯一标识
    //                   timestamp: data.timeStamp, // 必填，生成签名的时间戳
    //                   nonceStr: data.nonceStr, // 必填，生成签名的随机串
    //                   signature: data.sign, // 必填，签名
    //                   jsApiList: ["chooseWXPay", "checkJsApi"], // 必填，需要使用的JS接口列表
    //                 });

    //                 wx.ready(() => {
    //                   wx.chooseWXPay({
    //                     timestamp: data.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
    //                     nonceStr: data.nonceStr, // 支付签名随机串，不长于 32 位
    //                     package: data.packages, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
    //                     signType: data.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
    //                     paySign: data.sign, // 支付签名
    //                     success: function (payRes) {
    //                       // 支付成功后的回调函数
    //                       Toast("支付成功");
    //                       vm.$router.push({
    //                         path: "/orderDetail",
    //                         query: { orderId: res.orderId },
    //                       });
    //                     },
    //                     cancel: function (payRes) {
    //                       // that.$message.error('取消支付')
    //                     },
    //                     fail: function (payRes) {
    //                       // that.$message.error('支付失败')
    //                     },
    //                   });
    //                 });
    //               }
    //             });
    //         }
    //       });
    //   }

    // },
    play() {
      let video = document.getElementById("play_btn");
      video.play();
      this.playFlag = false;
    },

    goRouter(data) {
      this.$router.push(data.url);
    },
  },
};
</script>
<style>
body {
  background: #f6f5fa;
}
</style>
<style lang="less" scoped="">
.home {
  margin: auto;
  background: #f6f5fa;
  padding-bottom: 70px;

  .detailbox {
    padding: 15px;
    background: #fff;
    margin-bottom: 10px;

    .detail_con {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .detail_price {
        font-size: 16px;
        color: #f53939;
      }

      .detail_num {
        font-size: 12px;
        font-weight: 400;
        color: #9e9e9e;

        .txt {
          margin-left: 5px;
        }
      }
    }

    .detail_ttbox {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 10px;

      .share {
        font-size: 14px;
        color: #333;
        font-weight: 400;
      }
    }

    .detail_tt {
      font-size: 16px;
      word-break: break-all;
      box-sizing: border-box;
    }
  }

  .detail_goods {
    background: #fff;
    margin-bottom: 10px;
    overflow: hidden;

    .goods_tt {
      font-size: 16px;
      padding: 15px;
      font-weight: 400;
    }

    .goods_img {
      width: 100%;
    }

    .goods_tips {
      background: #e7eaf3;
      color: #d93247;
      font-size: 14px;
      padding: 12px;
      border-radius: 8px;
      width: 270px;
      line-height: 18px;
      margin: auto;
      margin-bottom: 20px;
    }
  }

  .footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #fff;

    .footerbox {
      display: flex;
      align-items: center;
      margin: auto;
      max-width: 500px;
    }

    .menu_item {
      color: #999faa;
      width: 33%;
      text-align: center;
      padding: 10px 0;

      .menu_icon {
        display: block;
        margin: auto;
        width: 20px;
      }

      .menu_name {
        font-size: 12px;
        margin-top: 5px;
      }

      &.active {
        color: #f53939;
      }
    }

    .buy_btn {
      background: linear-gradient(270deg, #ee0c24 0%, #fe5e33 100%);
      font-size: 14px;
      border-radius: 4px;
      padding: 3px 14px;
      text-align: center;
      color: #fff;
      height: 26px;
      line-height: 26px;
      margin: auto;
    }
  }
}

.my-swipe {
  height: 375px;
}

.videobox {
  width: 100%;
  height: 375px;
  background: #000;
}

.banner_img {
  width: 100%;
  height: 375px;
}

.play_btn {
  position: absolute;
  width: 40px;
  height: 40px;
  left: 50%;
  top: 50%;
  margin-left: -20px;
  margin-top: -20px;
  z-index: 999;
}

.video_img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 375px;
}
</style>
